<template>
  <van-form @submit="onSubmit" autocomplete="off" ref="form">
    <van-field
      v-model="login.phone"
      name="phone"
      label="手机号码"
      placeholder="手机号码"
      :rules="[
        { required: true, message: '请填写手机号码' },
        { pattern: this.$reg.phone, message: '请输入正确的手机号 ' },
      ]"
    />
    <van-field
      v-model="login.captcha"
      name="captcha"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        { required: true, message: '请填写短信验证码' },
        { pattern: /^\d{4}$/, message: '验证码必须4位数字' },
      ]"
    >
      <template #button>
        <van-button
          size="small"
          v-if="!toggle"
          @click.stop="countdown"
          :disabled="!flag"
          type="primary"
          >发送验证码</van-button
        >
        <van-button size="small" v-else type="warning"
          >{{ count }} s
        </van-button>
      </template>
    </van-field>
  
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>


<script>
import { Notify } from "vant";

export default {
  name: "signin",
  data() {
    return {
      login: {
        phone: this.$route.query.phone,
      },
      flag: false,
      count: 60,
      toggle: false,
    };
  },
  watch: {
    login: {
      deep: true,
      handler(v) {
        // this.$refs.form.validate("phone")
        if (this.$reg.phone.test(v.phone)) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
    },
  },
  mounted() {
    this.login = {
      ...this.login,
      phone: this.$route.query.phone
        ? this.$route.query.phone
        : localStorage.getItem("appphone"),
    };
  },
  methods: {
    sendCaptcha() {
      this.$ajax
        .sendcaptcha({
          phone: this.login.phone,
        })
        .then((res) => {
          if (res.code == 200) {
            Notify({ type: "success", message: res.msg });
          }
        });
    },

    onSubmit(value) {
      console.log("submit", value);
      this.$ajax.verifycaptcha(value).then((res) => {
        if (res.code == 200) {
          this.userphone = value.phone;
          localStorage.setItem("appphone", value.phone);
          localStorage.setItem("server_token", res.token);

          this.changeAppPhone(value.phone);
            this.resetUserInfo();

          this.$nextTick(() => {
            this.$router.push({ name: "my" });
          });
        }
      });
    },
    timerCounter() { 
      this.count--;
    },
    countdown() {
      this.sendCaptcha();
      this.toggle = true;

      var timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.toggle = true;
        } else {
          clearInterval(timer);
          timer = null;
          this.count = 60;
          this.toggle = false;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  background: rgba(255, 255, 255, 0.9);
}
</style>